<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>OA系统 - 我的</title>
    <link rel="stylesheet" href="css/mobile.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="phone-container">
        <div class="phone-screen">
            <div class="notch"></div>
            <div class="app-container">
                <!-- 顶部状态栏 -->
                <div class="status-bar">
                    <span>9:41</span>
                    <span>我的</span>
                    <div>
                        <i class="fas fa-signal"></i>
                        <i class="fas fa-wifi"></i>
                        <i class="fas fa-battery-full"></i>
                    </div>
                </div>
                
                <!-- 内容区域 -->
                <div class="content">
                    <!-- 个人信息头部 -->
                    <div class="profile-header">
                        <div class="profile-avatar">张</div>
                        <div class="profile-name">张三</div>
                        <div class="profile-role">产品经理 · 技术部</div>
                    </div>
                    
                    <!-- 考勤统计 -->
                    <div class="card" style="margin: 20px;">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 15px;">
                            <div style="font-weight: bold;">本月考勤</div>
                            <div style="font-size: 12px; color: #999;">2025年11月</div>
                        </div>
                        <div style="display: flex; justify-content: space-around;">
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #07c160;">22</div>
                                <div style="font-size: 12px; color: #999;">出勤天数</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #ff9800;">1</div>
                                <div style="font-size: 12px; color: #999;">请假天数</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #2196f3;">0</div>
                                <div style="font-size: 12px; color: #999;">迟到次数</div>
                            </div>
                            <div style="text-align: center;">
                                <div style="font-size: 20px; font-weight: bold; color: #f44336;">0</div>
                                <div style="font-size: 12px; color: #999;">早退次数</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 功能菜单 -->
                    <div class="menu-section">
                        <div class="menu-item" onclick="showToast('个人信息')">
                            <div class="menu-icon">
                                <i class="fas fa-user"></i>
                            </div>
                            <div class="menu-text">个人信息</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('考勤记录')">
                            <div class="menu-icon">
                                <i class="fas fa-clock"></i>
                            </div>
                            <div class="menu-text">考勤记录</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('请假申请')">
                            <div class="menu-icon">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div class="menu-text">请假申请</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('报销记录')">
                            <div class="menu-icon">
                                <i class="fas fa-receipt"></i>
                            </div>
                            <div class="menu-text">报销记录</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="menu-section">
                        <div class="menu-item" onclick="showToast('我的任务')">
                            <div class="menu-icon">
                                <i class="fas fa-tasks"></i>
                            </div>
                            <div class="menu-text">我的任务</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('我的项目')">
                            <div class="menu-icon">
                                <i class="fas fa-project-diagram"></i>
                            </div>
                            <div class="menu-text">我的项目</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('我的客户')">
                            <div class="menu-icon">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="menu-text">我的客户</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('工作报告')">
                            <div class="menu-icon">
                                <i class="fas fa-file-alt"></i>
                            </div>
                            <div class="menu-text">工作报告</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                    
                    <div class="menu-section">
                        <div class="menu-item" onclick="showToast('系统设置')">
                            <div class="menu-icon">
                                <i class="fas fa-cog"></i>
                            </div>
                            <div class="menu-text">系统设置</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('帮助与反馈')">
                            <div class="menu-icon">
                                <i class="fas fa-question-circle"></i>
                            </div>
                            <div class="menu-text">帮助与反馈</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                        <div class="menu-item" onclick="showToast('关于我们')">
                            <div class="menu-icon">
                                <i class="fas fa-info-circle"></i>
                            </div>
                            <div class="menu-text">关于我们</div>
                            <div class="menu-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 退出登录按钮 -->
                    <div style="padding: 0 20px 30px;">
                        <div class="btn btn-primary text-center" style="width: 100%; background: #f44336;" onclick="showToast('已退出登录')">
                            退出登录
                        </div>
                    </div>
                </div>
                
                <!-- 底部导航栏 -->
                <div class="tab-bar">
                    <div class="tab-item" onclick="window.location.href='index.html'">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23999\"><path d=\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\"/></svg>');"></div>
                        <div>首页</div>
                    </div>
                    <div class="tab-item" onclick="window.location.href='workbench.html'">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%23999\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"/></svg>');"></div>
                        <div>工作台</div>
                    </div>
                    <div class="tab-item active">
                        <div class="tab-icon" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"%2307c160\"><path d=\"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z\"/></svg>');"></div>
                        <div>我的</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="js/mobile.js"></script>
    <script>
        // 模拟时间更新
        function updateTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const timeElement = document.querySelector('.status-bar span');
            if (timeElement) {
                timeElement.textContent = `${hours}:${minutes}`;
            }
        }
        
        updateTime();
        setInterval(updateTime, 60000); // 每分钟更新一次时间
    </script>
</body>
</html>